<template>
	<view class="scroll-container">
		<u-navbar :is-back="false" title="计划" :background="navbarBg" title-color="#fff" :border-bottom="false">
			<view slot="left">
				<view class="chooseDate" @click="chooseDateShow = true">
					<text>{{chooseDate}}</text>
					<u-icon name="arrow-down" size="12"></u-icon>
				</view>
				<u-picker mode="time" v-model="chooseDateShow" :params="params" @confirm="confirmDate"></u-picker>
			</view>
		</u-navbar>
		<view class="fixed">
			<view class="search-box" @click="search">
				<view class="search">
					<u-icon class="icon-search" name="search" label-size="30"></u-icon>
					<span>搜索</span>
				</view>
			</view>
			<tabs :tabs="tabs" v-model="activeTab"></tabs>
		</view>
		
		<swiper class="swiper-container" :current="activeTab" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<list ref="mescrollItem" :createTime="createTime" :i="i" :index="activeTab" :tabs="tabs" :height="height"></list>
			</swiper-item>
		</swiper>
		
		<view class="add" @click="add" v-if="$_bauth('purchase_create')"></view>
		
		<!-- <u-tabbar :list="vuex_tabbar" active-color="#1378FF" inactive-color="#A4AFCC"></u-tabbar> -->
	</view>
</template>

<script>
	import tabs from '@/components/tabs.vue'
	import list from './list.vue'
	import moment from 'moment'
	export default{
		components:{tabs,list},
		data(){
			return {
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				tabs:[{cate_name:"全部"},{cate_name:"审批中"},{cate_name:"未通过"},{cate_name:"已通过"}],
				activeTab:0,// 当前tab的下标
				height:'',// 需要固定swiper的高度
				chooseDateShow:false,
				chooseDate:moment().format('YYYY[年]MM[月]'),
				createTime:{
					createTimeStart:moment().format('YYYY-MM')+ '-' + '01 00:00:00',
					createTimeEnd:moment().format('YYYY-MM')+ '-' + moment().daysInMonth() + ' 59:59:59',
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
				},
			}
		},
		onLoad(){
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(420) + 'px' 
			new Promise((resvole,reject) => {
				this.$u.api.getUserAuth().then(res => {
					if(res.code != 0){
						this.btnLoading = false
						this.isAuth = false
						reject()
					}else{
						this.$u.vuex('vuex_authList',JSON.stringify(res.data))
						resvole()
					}
				})
			})
		},
		methods:{
			refresh(){
				this.$nextTick(()=>{
					this.$refs.mescrollItem[this.activeTab].downCallback()
				})
			},
			search(){
				uni.navigateTo({
					url:"/pages/search/index?type=project"
				})
			},
			swiperChange(e){
				this.activeTab = e.detail.current
			},
			//添加计划
			add(){
				uni.navigateTo({
					url:"/pages/project/add"
				})
			},
			confirmDate(e){
				this.chooseDate = `${e.year}年${e.month}月`
				let createTime = {
					createTimeStart:`${e.year}-${e.month}` + '-' + '01 00:00:00',
					createTimeEnd:`${e.year}-${e.month}` + '-' + moment().set({'year': e.year, 'month': (parseInt(e.month) - 1)}).daysInMonth() + ' 59:59:59',
				}
				this.createTime = this.$u.deepClone(createTime)
				this.$nextTick(()=>{
					this.$refs.mescrollItem[this.activeTab].refresh()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chooseDate{
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		color: #fff;
		text{
			font-size: 30rpx;
			margin-right: 10rpx;
		}
	}
	.scroll-container{
		display: flex;
		flex-direction: column;
		height: 100vh;
		.swiper-container{
			flex: 1;
		}
	}
	
	.search-box{
		padding: 32rpx 30rpx;
		background: linear-gradient(180deg, #0082FF 0%, rgba(0, 130, 255, 0.9) 36%, rgba(0, 130, 255, 0.57) 74%, rgba(0, 130, 255, 0) 100%);
		.search{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			color: #A7ADB3;
			.icon-search{
				margin-right: 6rpx;
			}
			span{
				font-size: 28rpx;
			}
		}
	}
	.add{
		position: fixed;
		line-height: 96rpx;
		text-align: center;
		width: 96rpx;
		height: 96rpx;
		background: #1378FF;
		box-shadow: 0px 10rpx 56rpx -16rpx rgba(19,120,255,1);
		border-radius: 100%;
		right:20rpx;
		bottom:200rpx;
		&::after{
			content: "";
			width: 36rpx;
			height: 4rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%,-50%,0);
		}
		&::before{
			content: "";
			width: 4rpx;
			height: 36rpx;
			background: #FFFFFF;
			border-radius: 3rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%,-50%,0);
		}
	}
</style>
